<template>
  <el-dialog class="el-row__userDialog" :visible.sync="visible" :title="'选择基金机构'" :close-on-click-modal="false"
    :close-on-press-escape="false" :width="width" append-to-body>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-input v-model="dataForm.btypeName" :placeholder="基金机构" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()" type="primary">{{ $t('query') }}</el-button>
            <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <vxe-table ref="table1" v-loading="dataListLoading" :data="dataList" border :row-id="rowIdField"
          @select-change="selectionChangeHandle" @cell-dblclick="cellDblclick" style="width: 100%;"
          :checkbox-config="{reserve: false,highlight:true,trigger:'row'}">
          <vxe-table-column type="checkbox" width="50" align="center" v-if="multiple"></vxe-table-column>
          <vxe-table-column field="btypeName" title="机构名称">
          </vxe-table-column>
          <vxe-table-column field="shortName" title="机构简称" width="120">
          </vxe-table-column>
          <vxe-table-column field="btypeSort" title="机构分类" align="center" width="100">
            <template slot-scope="scope">
              {{$getDictLabel('MDM_BTYPE_SORT', scope.row.btypeSort)}}
            </template>
          </vxe-table-column>
          <vxe-table-column field="linkman" title="联系人" width="80" align="center">
          </vxe-table-column>
          <vxe-table-column field="tel" title="联系电话" width="120">
          </vxe-table-column>
          <vxe-table-column prop="status" :title="'user.status'" sortable header-align="center" align="center"
            width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
              <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column prop="createDate" :title="'user.createDate'" sortable header-align="center" align="center"
            width="180"></vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <el-tag v-for="(tag, i) in dataListSelections" :key="i" closable type="success" @close="handleClose(tag)">
          {{tag.btypeName}}
        </el-tag>
      </el-col>
    </el-row>
    <el-row class="footer">
      <el-col :span="24">
        <el-button type="primary" @click="HandleBackFun">{{ $t('userDialog.sure') }}</el-button>
        <el-button type="info" @click="handleClear">{{ $t('userDialog.clear') }}</el-button>
        <el-button @click="visible=false">{{ $t('userDialog.canel') }}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import mixinViewReserve from '@/mixins/view-reserve'

export default {
  name: 'uni-btype-select',
  mixins: [mixinViewReserve],
  data () {
    return {
      visible: false,
      // 1 字符串默认值 XXX,XXX 会从数据库重新取
      // 2 数组对象默认值 直接加载
      defaultValues: null,
      mixinViewModuleOptions: {
        getDataListURL: '/mdm/mdmBtypeInfo/page',
        getDataListIsPage: true,
        activatedIsNeed: false
      },
      dataForm: {
        btypeName: ''
      }
    }
  },
  props: {
    rowIdField: {
      type: String,
      default () {
        return 'id'
      }
    },
    width: {
      type: String,
      default () {
        return '70%'
      }
    },
    /**
     * dataForm 的初始值
     */
    initDataForm: {
      type: Object,
      default () {
        return {}
      }
    },
    multiple: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  methods: {}
}
</script>
<style>
</style>
